<h1>Color</h1>

<section>
  <div class="color-search">
    <fui-search placeholder="Enter color or name" [(ngModel)]="searchFilter" (ngModelChange)="onSearch()"></fui-search>
    <div class="color-palette" [style.background]="searchFilter"></div>
  </div>

  <section *ngIf="filteredColorVariables.length > 0">
    <h3>Color Variables</h3>
    <ng-container *ngTemplateOutlet="variableTemplate; context: {$implicit: filteredColorVariables}"></ng-container>
  </section>

  <section *ngIf="filteredColorProperties.length > 0">
    <h3>Custom Properties</h3>
    <ng-container *ngTemplateOutlet="propertyTemplate; context: {$implicit: filteredColorProperties}"></ng-container>
  </section>

  <section *ngIf="suggestColorVariables.length > 0">
    <h3>Suggest Color Variables</h3>
    <ng-container *ngTemplateOutlet="variableTemplate; context: {$implicit: suggestColorVariables}"></ng-container>
  </section>

  <section *ngIf="suggestColorProperties.length > 0">
    <h3>Suggest Custom Properties</h3>
    <ng-container *ngTemplateOutlet="propertyTemplate; context: {$implicit: suggestColorProperties}"></ng-container>
  </section>
</section>

<ng-template #variableTemplate let-variables>
  <div class="color" *ngFor="let variable of variables">
    <div class="color-content">
      <div class="color-name">
        {{variable.name}}
        <svg fuiIcon="copy" (click)="copyName(variable.name)"></svg>
      </div>
      <div class="color-note">
        {{variable.property}}
      </div>
    </div>
    <div class="color-palette" [style.background]="'var(' + variable.property + ')'"></div>
    <div class="color-value">
      {{variable.value}}
    </div>
  </div>
</ng-template>

<ng-template #propertyTemplate let-properties>
  <div class="color" *ngFor="let property of properties">
    <div class="color-content">
      <div class="color-name">
        {{property.name}}
        <svg fuiIcon="copy" (click)="copyName(property.name)"></svg>
      </div>
    </div>
    <div class="color-palette" [style.background]="'var(' + property.name + ')'"></div>
    <div class="color-value">
      {{property.value}}
    </div>
  </div>
</ng-template>
